<template>
  <div class="home">
    <el-row class="my-project">
      <h3 class="row-title">我的项目</h3>
      <div class="project-list">
        <el-card class="project-item card-normal" v-for="o in 4" :key="o">
          <template #header>
            <div class="company_info">
              <div>
                <img src="../assets/images/project-logo.png" alt="" srcset="" />
              </div>
              <div class="company_name">
                <p>杭州新爵士科技有限公司</p>
                <p>www.newjus.com</p>
              </div>
              <!-- normal/tryout -->
              <span class="company_mark normal" v-if="o%2==1">正常</span>
              <span class="company_mark tryout" v-if="o%2==0">试用</span>
            </div>
          </template>
          <div class="site_info">
            <span>文章：25</span>
            <span>浏览：1.7W</span>
          </div>
          <p class="expiration_time">到期时间：2025年4月15日</p>
          <div class="company_btn">
            <el-button type="" link>前台</el-button>
            <el-button type="" link @click="$router.push('/siteworkbench')">进入管理</el-button>
          </div>
        </el-card>
      </div>
    </el-row>
    <el-row class="my-project">
      <h3 class="row-title">模板仓库</h3>
      <img class="template-warehouse" src="../assets/images/template-warehouse.png" alt="" srcset="" />
      <h3 class="row-title">服务精选</h3>
      <div class="services">
        <el-card class="service card-normal">
          <div class="service_item">
            <div>
              <img src="../assets/images/home/service-1.png" alt="" />
            </div>
            <div class="service_description">
              <p>多平台、好交互</p>
              <p>「企业APP定制开发」</p>
            </div>
          </div>
        </el-card>
        <el-card class="service card-normal">
          <div class="service_item">
            <div>
              <img src="../assets/images/home/service-2.png" alt="" />
            </div>
            <div class="service_description">
              <p>全渠道、私域营销</p>
              <p>「小程序定制开发」</p>
            </div>
          </div>
        </el-card>
        <el-card class="service card-normal">
          <div class="service_item">
            <div>
              <img src="../assets/images/home/service-3.png" alt="" />
            </div>
            <div class="service_description">
              <p>logo、IP、创意</p>
              <p>「品牌宣传平面设计」</p>
            </div>
          </div>
        </el-card>
        <el-card class="service card-normal">
          <div class="service_item">
            <div>
              <img src="../assets/images/home/service-4.png" alt="" />
            </div>
            <div class="service_description">
              <p>个性化，多语言</p>
              <p>「品牌官网高端定制」</p>
            </div>
          </div>
        </el-card>
      </div>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import { initWebSocket } from '@/utils/websocket';

onMounted(() => {
  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket");
});

const goTarget = (url:string) => {
  window.open(url, '__blank')
}
</script>

<style scoped lang="scss">
:deep .el-card .el-card__header {
    padding: 24px!important;
    border: none;
  }
:deep .el-card .el-card__body {
    padding: 0!important;
  }

.card-normal{
  border-radius: 6px 6px 6px 6px;
  border: 1px solid rgba(168,176,188,0.2);
  box-shadow: none;
  background: linear-gradient( 135deg, #FFFFFF 0%, #F7FCFF 100%);
  &:hover{
    border: 1px solid #096AFF;
  }
}
.normal{
  color: #096AFF;
  line-height: 24px;
}
.tryout{
  color: #06B672;
  line-height: 24px;
}
.my-project{
  display: block;
  .row-title{
    margin: 24px 0;
    font-size: 16px;
    font-weight: 500;
    color: #3d3d3d;
    height: 24px;
    line-height: 24px;
  }
  .project-list{
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap; /* 响应式换行展示 */
    justify-content: flex-start; /* 水平方向间距 */
    gap: 16px; /* 设置行间距和列间距 */
    .project-item{
      width: 394px;
      height: 257px;
      .company_info{
        display: flex;
        justify-content:start;
        .company_name{
          margin-left: 20px;
          flex-grow: 1;
          p{
            margin:0 ;
            font-size: 16px;
            line-height: 24px;
          }
          p:first-child{
            font-weight: 500;
            color: #3D3D3D;
          }
          p:last-child{
            font-weight: 400;
            color: #A8B0BC;
          }
        }
        .company_mark{
          justify-self: end;
        }
      }
      .site_info{
        display: flex;
        justify-content: space-between;
        span{
          flex-grow: 1;
          font-size: 20px;
          color: #3D3D3D;
          line-height: 28px;
          text-align: center;
        }
      }
      .expiration_time{
        margin: 28px 0 28px 24px;
        font-size: 14px;
        color: #3D3D3D;
        line-height: 22px;
      }
     .company_btn{
      height: 47px;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid rgba(168,176,188,0.2);
        .el-button{
          flex-grow: 1;
          font-weight: 500;
          font-size: 16px;
          color: #3D3D3D;
          line-height: 24px;
          &:last-child{
            border-left: 1px solid rgba(168,176,188,0.2);
          }
        }
     }
    }
  }
  .template-warehouse{
    max-width: 1624px;
    max-height: 139px;
  }
  .services{
    display: flex;
    gap: 16px;
    .service{
      width: 394px;
      height: 104px;
      padding: 24px 28px;
      &:hover{
        color:#096AFF;
      }
      .service_item{
        display: flex;
        .service_description{
          font-weight: 400;
          font-size: 18px;
          color: #3D3D3D;
          line-height: 28px;
          p{
            margin: 0 0 0 24px;
          }
        }
      }
    }
  }
}
</style>
